<template>
    <div>
      <div :id="iddata" class="container"></div>
    </div>
  </template>
  
  <script>
  import L from "leaflet";
  import "leaflet/dist/leaflet.css"
  export default {
    name: "chatMap",
    props:['position','iddata'],
    data() {
      return {};
    },
    mounted() {
      this.initMap()
    },
    created() {
      // this.initMap()
    },
    methods: {
      // 初始化地图
  //     initMap() {
  //         let that=this
  //       var map = new AMap.Map("container", {
  //         zoom: that.position._scale, //级别
  //         center: [that.position._y, that.position._x], //中心点坐标
  //         //  mapStyle: 'amap://styles/macaron', 
  //       });
  //       var marker = new AMap.Marker({
  //         position: new AMap.LngLat(that.position._y, that.position._x),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
  //       });
  // map.add(marker);
  //     },
  
  initMap() {
        let that=this
  
        let map = L.map(this.iddata, {
                        minZoom: 3,
                        maxZoom: 15,
                        center: [ that.position._x,that.position._y],
                        zoom: 15,
                        zoomDelta: 0.5,
                        fullscreenControl: false,
                        zoomControl: false,
                        attributionControl: false
                      });
              this.map = map;
              //http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}//arcgis在线地图
              this.baseLayer=L.tileLayer("https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",{
                      attribution: '&copy; 高德地图',
                      maxZoom: 15,
                      minZoom: 3,
                      subdomains: "1234"
                  });
              this.map.addLayer(this.baseLayer);
              this.addMarker()
      },
      addMarker() {
        let that=this
  
        //设置图标样式
        var myIcon = L.icon({
          iconUrl: require('../../../assets/po.png'),
          iconSize: [30, 30],
        });
        that.marker = L.marker([that.position._x,that.position._y], {
          icon: myIcon
        }).addTo(this.map)
        // that.marker.bindPopup(that.position.title);
      },
    },
  };
  </script>
  
  <style scoped>
 .container{
     width: 233px;
     height: 180px;
     
  }
  @media screen and (min-width: 2360px) {
.container{
     width: 1rem;
     height: 0.8rem;
  }
  }
  </style>